<%--
  Created by IntelliJ IDEA.
  User: chels
  Date: 2021/4/30
  Time: 15:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>index_echats图表测试页面</title>

    <link href="${pageContext.request.contextPath}/lyq/echarts/css/basic.css" type="text/css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/lyq/echarts/css/visualize.css" type="text/css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/lyq/echarts/css/visualize-dark.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/lyq/echarts/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lyq/echarts/js/excanvas.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lyq/echarts/js/visualize.jQuery.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/axios.min.js"></script>

    <script type="text/javascript">

        $(function(){

            // $('table').visualize({type: 'pie', height: '250px', width: '370px'});
            $('table').visualize({type: 'bar', width: '370px'});
            $('table').visualize({type: 'area', width: '370px'});
            $('table').visualize({type: 'line', width: '370px'});

            $('table td').click(function(){

                    if( !$(this).is('.input') ){
                        $(this).addClass('input')
                            .html('&lt;input type="text" value="'+ $(this).text() +'" />')
                            .find('input').focus()
                            .blur(function(){
                                //remove td class, remove input
                                $(this).parent().removeClass('input').html($(this).val() || 0);
                                //update charts
                                $('.visualize').trigger('visualizeRefresh');

                            });

                    }

                })

                .hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); });

        });

    </script>

    <style type="text/css">

        table{float:left;margin:140px 40px 0 0;}

        td input{border:1px solid orange;background:yellow;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;padding:8px 0;text-align:center;width:60px;margin:-17px 0 0 4px;font-size:1.4em;}

        td.input{padding:0;position:relative;}

        .visualize{float:left;}

        .demo{width:980px;margin:0 auto;}

        .demo .btndemo{display:inline-block;height:30px;line-height:30px;padding:0 12px;margin:0 20px;font-size:14px;background:#ddd;color:#fff;text-decoration:none;}

    </style>

</head>

<body>



<div class="demo">

    <div>
        <a href="index.jsp"><button>返回主页</button></a>
    </div>


    <table style="width:100%;margin:40px 0 0 0;">

        <caption>2021年一季度课程销售走势图</caption>

        <thead>

        <tr>

            <td></td>

            <th scope="col">Food</th>

            <th scope="col">IT</th>

            <th scope="col">Country</th>

            <th scope="col">Entertainment</th>

            <th scope="col">Travel</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <th scope="row">Mary</th>

            <td>{{courseTotalsList.sumFood}}</td>

            <td>{{courseTotalsList.sumIT}}</td>

            <td>{{courseTotalsList.sumCountry}}</td>

            <td>{{courseTotalsList.sumEntertainment}}</td>

            <td>{{courseTotalsList.sumTravel}}</td>

<%--            <td>70</td>--%>

        </tr>

        <tr>

            <th scope="row">Tom</th>

            <td>356</td>

            <td>404</td>

            <td>3022</td>

            <td>452</td>

            <td>3512</td>

<%--            <td>49</td>--%>

        </tr>

        <tr>

            <th scope="row">Brad</th>

            <td>1020</td>

            <td>1800</td>

            <td>1210</td>

            <td>1852</td>

            <td>2252</td>

<%--            <td>79</td>--%>

        </tr>

        <tr>

            <th scope="row">Kate</th>

            <td>2140</td>

            <td>2480</td>

            <td>1090</td>

            <td>2125</td>

            <td>1215</td>

<%--            <td>119</td>--%>

        </tr>

        </tbody>

    </table>

</div>

<script type="text/javascript">

    new Vue({
        el:".demo",
        data:{
            courseTotalsList:{}
        },
        methods:{
            findCourseTypeTotals:function(){
                var _this = this;
                axios.get("${pageContext.request.contextPath}/EchartsController/findEcharts").then(function (response) {
                    _this.courseTotalsList = response.data;
                    console.log("courseTotalsList=======",_this.courseTotalsList);
                }).catch(function (error) {
                    console.log(error);
                })
            }
        },
        created:function () {
            this.findCourseTypeTotals();
        }
    })

</script>

</body>

</html>